<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 登录表单区 -->
			<el-form
				ref="loginFormRef"
				:model="loginForm"
				:rules="loginFormRules"
				label-width="0px"
				class="login_form"
			>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						prefix-icon="iconfont icon01"
					></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input
						type="password"
						v-model="loginForm.password"
						prefix-icon="iconfont iconmima"
					></el-input>
				</el-form-item>
				<!-- 按钮区域 -->
				<el-form-item class="btns">
					<el-button @click="login" type="primary">登录</el-button>
					<el-button @click="resetLoginForm" type="info"
						>重置</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			/* 登录表单的注册绑定对象 */
			loginForm: {
				username: 'admin',
				password: '123456',
			},
			//表单的验证规则对象
			loginFormRules: {
				//验证用户名和密码是否合法
				username: [
					{
						require: true,
						message: '请输入登录名称',
						trigger: 'blur',
					},
					{
						min: 3,
						max: 5,
						message: '长度在3到5个字符',
						rigger: 'blur',
					},
				],
				password: [
					{ requre: true, message: '请输入密码', trigger: 'blur' },
					{
						min: 6,
						max: 15,
						message: '长度在6到15个字符',
						rigger: 'blur',
					},
				],
			},
		}
	},
	methods: {
		//点击重置按钮,重置登录表单
		resetLoginForm() {
			//指向vueCompent
			console.log(this)
			this.$refs.loginFormRef.resetFields()
        },
        //点击提交按钮
		login() {
			this.$refs.loginFormRef.validate(async (valid) => {
				if (!valid) return
				const { data: res } = await this.$http.post('login', this.loginForm)
                // console.log(res);
                if(res.meta.status !== 200) return this.$message.error("登录失败")
                this.$message.success("登录成功")
                //1.将登录成功之后的token 保存到客户端的sessionStorage中
                //1.1 项目中处理登录之外的其他API接口，必须在登录之后才能访问
                //1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
                console.log(res);
                window.sessionStorage.setItem("token", res.data.token);
                //2.通过编程式导航跳转到后台主页，路由地址是/home
                this.$router.push('/home');
			})
		},
	},
}
</script>

<style lang="less" scoped>
.login_container {
	background-color: #2b4b6b;
	height: 100%;
}

.login_box {
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	.avatar_box {
		height: 130px;
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 10px;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}
	}
}
.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.btns {
	display: flex;
	justify-content: flex-end;
}
</style>